<template>
	<view class="content">
		<!-- 批次详情 -->
		<view class="statistics_msg_box">
			<view class="statistics_bcode_box">
				<view class="statistics_title">
					今日揽收运单：
				</view>
				<view class="statistics_count">{{normal_record_data.day_order_collect_count}}单</view>
			</view>
			<view class="fenge"></view>
			<view class="statistics_bcode_box">
				<view class="statistics_title">
					本月揽收运单：
				</view>
				<view class="batch_record_data">{{normal_record_data.month_order_collect_count}}单</view>
			</view>
		</view>
		<!-- 查找 -->
		<form @submit="search" @reset="reset">
			<view class="search_box">
				<view class="search_box_search" v-show="search_show">
					<view class="input_box">
						<img src="../../static/image/minejijian_icon_sousuo@2x.png" alt="">
						<input type="text" name="search_input" v-model="search_input" placeholder="请输入姓名/手机号/运单号" placeholder-style="color: #999999">
					</view>
					<button class="search_btn" form-type="submit">查找</button>
				</view>
				<view>
				<!-- 搜索结果 -->
					<view class="search_result" v-show="!search_show">
						<text class="search_result_text">{{search_input}}</text>
						<button form-type="reset" class="delete_search_btn">
							<img src="../../static/image/minejijian_icon_shanchu@2x.png" alt="">
						</button>
					</view>
				</view>
			</view>
		</form>
		<!-- 面单列表 -->
		<view class="wait_print_list_box" style="padding-bottom: 24rpx;">
			<view v-for="(item,index) in normal_record_list" class="order_box">
				<view class="receiver_remark" v-if="item.receiver_remark != ''">
					<view>收件人：</view>
					<view>{{item.receiver_name}}</view>
				</view>
				<view class="fenge"></view>
				<view class="agent_fee">
					<view>手机号：</view>
					<view>{{item.receiver_phone}}</view>
				</view>
				<view class="fenge"></view>
				<view class="receiver_created_at">
					<view>运单号：</view>
					<view>{{item.express_code}}</view>
				</view>
				<view class="fenge"></view>
				<view class="receiver_remark" style="margin-bottom:0">
					<view>揽收时间：</view>
					<view>{{item.collected_at}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var page = 1, timer = null;
	export default {
		data() {
			return {
				token: '',
				normal_record_data: {},
				// 已打印加载
				loadingText: '加载中...',
				// 批次揽收记录列表
				normal_record_list: [],
				// 已打印搜索框值
				search_input: '', 
				search_show: true,
			}
		},
		onLoad(options) {
			console.log(options)
			this.uuid = options.uuid
			// 获取token
			uni.getStorage({
				key: 'token',
				success: res => {
					this.token = res.data
					// 获取批次详情首页数据
					this.getNormalRecord()
				},
				fail: res => {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			})
			
		},
		onReachBottom (){
			console.log(1)
			if(timer != null){
				clearTimeout(timer);
			}
			timer = setTimeout(() => {
				//加载更多数据
				this.getRecordMore();
			}, 500);
		},
		methods:{
			// 清空搜索 点击关闭
			reset () {
				this.search_input = ''
				this.search_show = true
				this.getNormalRecord()
			},
			// 搜索
			search (e) {
				if ((e.detail.value.search_input == '') || (e.detail.value.search_input == ' ')){
					return false
				}
				this.search_show = false;
				this.search_input = e.detail.value.search_input
				this.getNormalRecord()
			},
			// 详情列表上拉刷新 
			getRecordMore(){
				if(this.loadingText === "加载中..."){
					return false;
				}
			    this.loadingText = '加载中...';
			    //在当前页面显示导航条加载动画。
			    uni.showNavigationBarLoading();
				this.$https.get(`api/mini_collection/v1/orders/normal_collect_record?token=${this.token}&limit=20&page=${page}&key=${this.search_input}`)
				.then(res => {
					if(res.data.results.length < 1){
						 //在当前页面隐藏导航条加载动画。
						uni.hideNavigationBarLoading();
						this.loadingText = '已加载全部';
						return false;
					}
					page++;
					console.log(res);
					this.normal_record_list = this.normal_record_list.concat(res.data.results);
					this.loadingText = '';
					uni.hideNavigationBarLoading();
				})
			},
			// 获取第一页数据
			getNormalRecord(){
			    page = 1;
			    uni.showNavigationBarLoading();
				this.$https.get(`api/mini_collection/v1/orders/normal_collect_record?token=${this.token}&limit=20&page=${page}&key=${this.search_input}`)
				.then(res => {
					// this.state = res.data.batch_detail.state
					this.normal_record_data = res.data
					page++;
					this.normal_record_list = res.data.results;
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();
					this.loadingText = '';
				})
			}
		},
	}
</script>

<style>
	button::after { border: none }
	.content {
		/* height: 100%; */
		width: 100%;
		overflow-x: hidden;
	}
	.statistics_title{
		color: #333333;
	}
	.statistics_msg_box{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 24rpx;
		border-radius: 12rpx;
		background: #ffffff;
		padding-top: 28rpx;
	}
	.statistics_bcode_box{
		display: flex;
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-bottom: 24rpx;
		font-size: 28rpx;
		color: #666666;
		justify-content: space-between;
	}
	.statistics_bcode_box:nth-last-of-type(1){
		padding-bottom: 24rpx;
	}
	.statistics_bcode_count{
		color: #13A684;
	}
	.fenge{
		width: calc(100% - 48rpx);
		height: 2rpx;
		margin-left: 24rpx;
		margin-bottom: 24rpx;
		background-color: #eeeeee;
	}
	.fenge_{
		width: 302rpx;
		height: 2rpx;
		margin-bottom: 24rpx;
		background-color: #eeeeee;
		margin-top: 24rpx;
	}
	.statistics_order_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		font-size: 28rpx;
	}
	.statistics_order_total_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #666666;
		width: 302rpx;
	}
	.green{
		color: #13A684;
	}
	.yellow{
		color: #FFB63A;
	}
	/* 搜索 */
	.search_box{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 24rpx;
		border-radius: 12rpx;
		background: #ffffff;
		height: 128rpx;
	}
	.input_box{
		display: flex;
		background: #eeeeee;
		border-radius: 12rpx;
		width: 500rpx;
		height: 80rpx;
		align-items: center;
	}
	.input_box img{
		width: 32rpx;
		height: 32rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}
	.search_result img{
		height: 20rpx;
		width: 20rpx;
	}
	.search_result{
		display: inline-block;
		align-items: center;
		background: #D1E0DA;
		border-radius: 12rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		height: 80rpx;
		justify-content: space-between;
		margin-top: 24rpx;
		margin-left: 24rpx;
	}
	.search_result_text{
		float: left;
		line-height: 80rpx;
		margin-right: 24rpx;
		color: #13A684;
		font-size: 28rpx;
	}
	.search_box_search{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		height: 100%;
	}
	.search_btn{
		width: 130rpx;
		height: 80rpx;
		background-color: #13A684;
		color: #ffffff;
		border-radius: 12rpx;
		font-size: 32rpx;
		border: none
	}
	.delete_search_btn{
		width: 20rpx;
		height: 20rpx;
		padding: 0;
		background: url(../../static/image/minejijian_icon_shanchu@2x.png);
		background-size:20rpx 20rpx;
		margin-top: 30rpx;
		margin-left: 24rpx;
	}
	/* 面单盒子 */
	.order_box{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 24rpx;
		border-radius: 12rpx;
		background: #ffffff;
		padding-top: 28rpx;
		padding-bottom: 24rpx;
	}
	.express_code{
		padding-top: 34rpx;
		margin-left: 24rpx;
		font-size: 28rpx;
		color: #999999;
	}
	.receiver_base_msg_box{
		display: flex;
		margin-top: 34rpx;
		margin-left: 24rpx;
		align-items: center;
	}
	.receiver_base_msg_box img{
		width: 60rpx;
		height: 60rpx;
		margin-right: 12rpx;
	}
	.receiver_name{
		font-size: 32rpx;
		color: #333333;
		line-height: 60rpx;
	}
	.receiver_phone{
		font-size: 32rpx;
		color: #3A9BFF;
		margin-left: 24rpx;
		line-height: 60rpx;
	}
	.receiver_address{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 24rpx;
		font-size: 28rpx;
		color: #666666;
		padding-bottom: 12rpx;
	}
	.fenge{
		width: calc(100% - 48rpx);
		height: 2rpx;
		margin-left: 24rpx;
		margin-bottom: 24rpx;
		background-color: #eeeeee;
	}
	.receiver_remark,.agent_fee,.receiver_created_at{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-bottom: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #666666;
	}
	.agent_fee_text{
		color: #13A684;
	}
	.receiver_state{
		font-size: 28rpx;
		color: #FFB63A;
	}
	.wait_collect_bottom_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		padding-bottom: 24rpx;
	}
	.wait_collect_btn_box{
		display: flex;
		align-items: center;
	}
	.cancle_sender_btn{
		font-size: 28rpx;
		color: #FF5F5F;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		width: 220rpx;
		border-radius: 12rpx;
		border:2rpx solid #FF5F5F;
	}
	.print_again_btn{
		font-size: 28rpx;
		color: #13A684;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		width: 140rpx;
		border-radius: 12rpx;
		border:2rpx solid #13A684;
		margin-left: 24rpx;
	}
	.print_btn{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background: #13A684;
		color: #ffffff;
		text-align: center;
		line-height: 100rpx;
		font-size: 32rpx;
	}
</style>
